<template>
  <div class="login">
    <div class="login-position">
      <div class="login-title">山西省交通行业视频云联网信令测试软件</div>
      <div class="login-con">
        <el-card class="login-card" icon="log-in">
          <div slot="header">
            <span>欢 迎 登 录</span>
          </div>
          <div>
            <el-form
              :model="formInline"
              :rules="ruleInline"
              @keyup.enter.native="login"
            >
              <el-form-item prop="userName">
                <el-input
                  type="text"
                  prefix-icon="el-icon-user-solid"
                  placeholder="请输入账号"
                  v-model="formInline.userName"
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-top: 5%" prop="password">
                <el-input
                  type="password"
                  prefix-icon="el-icon-lock"
                  placeholder="请输入密码"
                  v-model="formInline.password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="checked">记住密码</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login">登 录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { reqAuth } from "../../api";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      checked: true,
      formInline: {
        userName: "",
        password: "",
      },
      ruleInline: {
        userName: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    ...mapActions(["handleAuthenticate"]),
    async authenticate() {
      let Base64 = require("js-base64").Base64;
      let result = await reqAuth();
      if (result.token) {
        // 认证成功,保存token信息
        let token = result.token;
        this.handleAuthenticate(token);
        this.$router.replace({ name: "https-test" });
        if (this.checked === true) {
          // 传入账号，密码和保存天数3个参数
          this.setCookie(
            Base64.encode(this.formInline.userName),
            Base64.encode(this.formInline.password),
            7
          );
        } else {
          //清空Cookie
          this.clearCookie();
        }
      }
    },

    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },

    // 读取cookie
    getCookie() {
      let Base64 = require("js-base64").Base64;
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; ");
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("=");
          if (arr2[0] == "userName") {
            this.formInline.userName = Base64.decode(arr2[1]);
          } else if (arr2[0] == "password") {
            this.formInline.password = Base64.decode(arr2[1]);
          }
        }
      }
    },

    // 清除cookie
    clearCookie() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },

    login() {
      //先进行前端初步验证
      let Base64 = require("js-base64").Base64;
      if (!this.formInline.userName || !this.formInline.password) {
        this.$message.warning("请输入账号和密码");
      } else if (this.formInline.userName !== Base64.decode("YWRtaW4=")) {
        this.$message.warning("账号不存在");
      } else if (
        this.formInline.password !== Base64.decode("X3N3anR1OTQyMg==")
      ) {
        this.$message.warning("密码错误");
      } else {
        this.userInfo.userName = this.formInline.userName;
        this.userInfo.password = this.formInline.password;
        this.authenticate();
      }
    },
  },
};
</script>

<style lang="less">
@import "./login.less";
</style>
